<template>
  <div class="w_header flexbetween">
    <div>
      <template v-if="rowItem">
        <span class="f-14 c_222333">{{ rowItem.nickname }}</span>
        <span class="f-12 c_f90 pl-5">@yunyy</span>
        <span class="f-12" style="color: #a1a7b7"
          >（来自: 闵雨薇 <span class="f-12 c_f90 pl-5">@锐行</span>）</span
        >
        <el-popover width="320" v-model="visible">
          <el-form
            v-if="rowItem.isGroup"
            :model="groupform"
            label-width="50px"
          >
            <el-form-item label="群名:" prop="name" class="mb-10">
              <el-input
                v-model="groupform.name"
                size="small"
                placeholder="请输入群名"
              ></el-input>
            </el-form-item>
            <el-form-item label="别名:" prop="name">
              <el-input
                v-model="groupform.name"
                size="small"
                placeholder="请输入别名"
              ></el-input>
            </el-form-item>
          </el-form>
          <div class="flex" v-else>
            <i class="el-icon-warning c_warning formwarnicon f-16 mr-10"></i>
            <el-form
              :model="nameform"
              ref="nameform"
              label-position="top"
              class="nameform flex1"
            >
              <el-form-item label="修改备注" prop="name">
                <el-input
                  v-model="nameform.name"
                  size="small"
                  placeholder="请输入备注"
                ></el-input>
              </el-form-item>
            </el-form>
          </div>
          <div style="text-align: right; margin: 0">
            <el-button size="mini" @click="visible = false"
              >取消</el-button
            >
            <el-button type="primary" size="mini" @click="handleEidtName"
              >确定</el-button
            >
          </div>
          <i
            class="el-icon-edit-outline f-16 commhover c_primary"
            slot="reference"
          ></i>
        </el-popover>
      </template>
    </div>
    <div class="c_primary f-14">
      查看更多聊天消息 <i class="el-icon-arrow-right"></i>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      nameform: {
        name: "",
      },
      groupform:{
        name:''
      }
    };
  },
  props: {
    rowItem: {
      type: Object,
      default: {},
    },
  },
  methods: {
    // 修改备注
    handleEidtName() {
      this.visible = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.nameform {
  ::v-deep .el-form-item__label {
    padding-bottom: 0;
  }
}
.formwarnicon {
  line-height: 36px;
}
</style>